{% extends "ad_template_base.html" %}
{% load staticfiles %}

{% block style %}
    <style>
        .tp3-wrapper {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .tp3-center {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            text-align: center;
            border-radius: 0px;
            width: 100%;
        }
        .tp3-one-half {
            position: relative;
            height: 50%;
        }
        .tp3-img-div-1 {
            margin: auto;
            position: absolute;
            left: 10%;
            top: 10%;
            -ms-transform:rotate(-10deg); /* IE 9 */
            -moz-transform:rotate(-10deg); /* Firefox */
            -webkit-transform:rotate(-10deg); /* Safari and Chrome */
            -o-transform:rotate(-10deg); /* Opera */
            transform:rotate(-10deg);
        }
        .tp3-img-div-2 {
            margin: auto;
            position: absolute;
            left: 20%;
            top: 5%;
            -ms-transform:rotate(15deg); /* IE 9 */
            -moz-transform:rotate(15deg); /* Firefox */
            -webkit-transform:rotate(15deg); /* Safari and Chrome */
            -o-transform:rotate(15deg); /* Opera */
            transform:rotate(15deg);
        }
        .tp3-img {
            width: 100%;
            border: 3px white solid;
        }
        .tp3-title {
            font-size: 1.8rem;
            margin: 0;
        }
        @media only screen and (max-width: 430px) {
            .tp3-img-div-1 {
                left: 0%;
            }
            .tp3-img-div-2 {
                left: 0%;
            }
            .tp3-title {
                font-size: 1.4rem;
            }
        }
        @media only screen and (max-height: 1050px) {
            .tp3-img {
                width: 77%;
            }
        }
        @media only screen and (max-height: 700px) {
            .tp3-img {
                width: 65%;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="tp3-wrapper">
        <div class="tp3-center">
            <div class="tp3-one-half">
                <div class="tp3-img-div-1">
                    <p class="ad-text-content tp3-title">{{ title_text_1 }}</p>
                    <img class="tp3-img" id="img_1" src="{{ img_1 }}" ad-hot="{{ ad_id_1 }}" ad-hot-action-type="{{ hot_action_type_1 }}" ad-hot-action-param='{{ hot_action_param_1 }}' onerror="this.onerror=null;this.src='http://7xias2.com1.z0.glb.clouddn.com/default_420X420.jpg'" />
                </div>
            </div>
            <div class="tp3-one-half">
                <div class="tp3-img-div-2">
                    <img class="tp3-img" id="img_2" src="{{ img_2 }}" ad-hot="{{ ad_id_2 }}" ad-hot-action-type="{{ hot_action_type_2 }}" ad-hot-action-param='{{ hot_action_param_2 }}' onerror="this.onerror=null;this.src='http://7xias2.com1.z0.glb.clouddn.com/default_420X420.jpg'" />
                    <p class="ad-text-content tp3-title">{{ title_text_2 }}</p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        var night = {% if night %} true {% else %} false {%  endif %};
    </script>
{% endblock %}